<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="upperWrap">
<div id="upper">title text </div>
</div>
<div id="line"></div>
<div id="lowerWrap">
<div id="lower">This is just the lower info</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({ repeat: -1 });
tl.from("#line", 0.5, { scaleX: 0, transformOrigin: "right center" });
tl.from("#upper", 0.75, { y: 30 }, "text");
tl.from("#lower", 0.75, { y: -30 }, "text");
tl.to("#line, #upper, #lower", 1, { opacity: 0 }, "+=3");
</script>
